<template>
	<view class="page">
		<view class='newLogin'>
			<view class="logBox">
				<image src="../../static/img/logo_login.png" mode="" class="logo"></image>
			</view>
			<view class="tab-box">
			  <view v-for="(item,index) in tab" :key="index" class="tab" :class="{active:currentTab == index}"  @tap="changeTab(index)">{{item}}</view>
			  <view class="block" :class="{active:currentTab == 1}"></view>
			</view>
			<view class="inputBox">
				<view class="input-row">
					<view class="label">
						手机号
					</view>
				    <input type="text" class="input">
				</view>
				<view class="input-row">
					<view class="label">
						验证码
					</view>
					<input type="text" class="input">
					<view class="setBtn">发送验证码</view>
				</view>
			</view>
			<view class="bottomBox">
				<view class="btn">立即登录</view>
			</view>
			<view class="bottomText">没有账号？<view class="goResiner">去注册</view></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab:0,
				tab:['短信登录','密码登录']
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
			}
		}
	}
</script>

<style lang="scss">
	@function toPx($px) {
	  @return $px / 1.44 + rpx;
	}
	
	.page {
		background-color: #eff1f4;
	}
	
  .newLogin {
	  width: 100%;
	  height: 100%;
	  background-image: url('../../static/img/bck_login.jpg');
	  background-repeat: no-repeat;
	  background-size: 100% auto; 
	  .logBox {
		  padding-top: 200rpx;
		  margin-bottom: 72rpx;
		  .logo {
		  	width:395rpx;
			height:292rpx;
		  }
		  @include center()
	  }
	  
  }
  
  .tab-box {
	  padding: 0 116rpx;
	  color:#fff;
	  font-size: toPx(46);
	  display: flex;
	  position: relative;
	  margin-bottom: 70rpx;
	  .tab {
		  margin-right: 40rpx;
		  color:#cee3f8;
		  &.active {
			  color:#fff;
		  }
	  }
	  .block {
		  position: absolute;
		  width: 70rpx;
		  height: 12rpx;
		  border-radius: 10rpx;
		  background-color: #fff;
		  top:52rpx;
		  left:138rpx;
		  transition:left 0.1s;
          &.active {
			  left:300rpx;
		  }
	  }
  }
  
  .inputBox {
	  padding: 0 46rpx;
	  .input-row {
		  height: 106rpx;
		  border-radius: 50rpx;
		  background-color: #fff;
		  margin-bottom: 40rpx;
		  display: flex;
		  position: relative;
		  .setBtn {
			  color:#1a8afc;
			  position: absolute;
			  font-size: 32rpx;
			  right: 30rpx;
			  top: 30rpx;
		  }
		  .label {
			  height: 100%;
			  width: 180rpx;
			  display: flex;
			  align-items: center;
			  padding-left: 50rpx;
			  // background-color: red;
		  }
		  .input {
			 position: relative;
			 top:30rpx;
			 height: 36rpx;
			 width: 256rpx;
			 overflow: hidden;
		  }
	  }
  }
  
  .bottomBox {
	  padding: 190rpx 46rpx 10rpx 46rpx;
	  .btn {
		  width: 100%;
		  height: 120rpx;
		  border-radius: 85rpx;
		  color:#fff;
		  background-color: #1f8cfd;
		  box-shadow: 2px 10px 10px #a5c4e3;	
		  @include center()
		  &.disable {
			   background-color: #97a7b9;
		  }
	  }
  }
  .bottomText {
	  @include center();
  }
  // .goResiner {
	 //  color:#1a8afc;
  // }
</style>
